<script>
export default {

}
</script>
<template>
    <div class="layout-page" width="100%">
        <el-container>
            <el-aside class="Aside" width="15%">
                <div id="logo">
                </div>
                <!-- 左侧列表  索引可以选择你当前的页面 非常有用 :default-active="1"默认选择索引1 -->
                <!-- 更有效的使用，换成 路由地址！ -->
                <!-- <el-scrollbar> 我们不需要这个滚动条 -->
                    
                <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" >
                    <!-- 点击后页面跳转！非常好使 -->
                    <router-link to="/article/category">
                        <el-menu-item index="/article/category" style="background-color: black;">
                            <el-icon>
                                <Management />
                            </el-icon>
                            <span>文章分类</span>
                        </el-menu-item></router-link>
                    <router-link to="/article/manage">
                        <el-menu-item index="/article/manage" style="background-color: black;">
                            <el-icon>
                                <Promotion />
                            </el-icon>
                            <span>图书管理</span>
                        </el-menu-item></router-link>

                    <el-sub-menu style="background-color: black;">
                        <template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>个人中心
                        </template>
                        <el-menu-item-group style="background-color: black;">
                            <!-- <template #title >Group 1</template> -->
                            <router-link to="/user/info">
                                <el-menu-item index="/user/info">基本资料</el-menu-item>
                            </router-link>
                            <router-link to="/user/avatar">
                                <el-menu-item index="/user/avatar">更换头像</el-menu-item>
                            </router-link>
                            <router-link to="/user/password">
                                <el-menu-item index="/user/password">修改密码</el-menu-item>
                            </router-link>
                        </el-menu-item-group>


                    </el-sub-menu>

                </el-menu>

            </el-aside>
            <el-container>
                <el-header class="Header" align="center"><strong>欢迎您来到大事件</strong></el-header>
                <el-main class="Main" align="middle"><router-view></router-view></el-main>
                <el-footer class="Footer" align="middle">大事件@LLY</el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<style lang="scss" scoped>
#logo {
    height: 120px;
    background: url('@/assets/logo.png') no-repeat center / 120px auto;
}

.Aside {
    height: 100vh;
    background-color: rgb(0, 0, 0);

    .el-scrollbar {
        height: 100%;
    }
}

.layout-page {
    height: 100vh;
    background-color: grey;
    background:url('@/assets/login_bg.jpg') no-repeat center / cover;

    .Header {
        height: 10vh;
        // background-color: rgb(255, 255, 255);
        // background:url('@/assets/login_bg.jpg') no-repeat center / cover;
        font-size: 5vh;
    }

    .Main {
        height: 80vh;
        // background-color: rgb(233, 232, 232);
    }

    .Footer {
        height: 10vh;
        // background-color: rgb(233, 232, 232);
    }
}
</style>  